<template>
    <view class="container" :class="['container-' + type]">
        <view class="select-display" v-if="type === 'display'">
            <text class="select-display-text" :style="{ color: modelValue ? '#3D3D3D' : '#909399' }">{{ modelValue ||
                placeholder }}</text>
            <up-icon name="arrow-right" color=" #909399" size="30rpx"></up-icon>
        </view>
        <template v-if="type === 'input'">
            <input class="select-input" :placeholder="placeholder" :value="modelValue"
                placeholder-style="color: #909399;" :style="{ paddingRight: unit ? '25rpx' : '50rpx' }"
                :type="inputType" />
            <text class="select-input-unit">{{ unit }}</text>
        </template>
    </view>
</template>

<script setup>
const props = defineProps({
    modelValue: {
        type: String,
        default: "",
    },
    options: {
        type: Array,
        default: [],
    },
    type: {
        type: String,
        default: "default",
        validator: (value) => {
            return ["default", "display"].includes(value);
        },
    },
    placeholder: {
        type: String,
        default: "请选择",
    },
    inputType: {
        type: String,
        default: "text",
        validator: (value) => {
            return ["text", "number"].includes(value);
        },
    },
    unit: {
        type: String,
        default: "",
    },
});
const emits = defineEmits(["update:modelValue"]);
const onSelect = () => {
    emits("update:modelValue", true);
};
</script>

<style lang="scss" scoped>
.container {
    &.container-display {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    &.container-input {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .select-input {
        text-align: right;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 400;
        font-size: 23rpx;
        color: #909399;
        line-height: 45rpx;
    }

    .select-input-unit {
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 400;
        font-size: 23rpx;
        color: #333333;
        line-height: 45rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .select-display {
        display: flex;
        align-items: center;
        gap: 20rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 400;
        font-size: 23rpx;
        color: #909399;
        line-height: 45rpx;
    }
}
</style>